<template>
    <view class="page-container">
        <!-- 顶部分段器 -->
        <view class="top-segment">
            <u-subsection 
                mode="subsection" 
                :list="deviceTypes" 
                :current="currentType" 
                @change="handleTypeChange"
                activeColor="#2979ff">
            </u-subsection>
        </view>

        <!-- 设备列表 -->
        <view class="device-list">
            <u-collapse @change="handleChange">
                <u-collapse-item v-for="(item, index) in deviceList" :key="index" :title="item.address" :name="index">
                    <template v-if="currentType === 0">
                        <meter-detail :data="item"></meter-detail>
                    </template>
                    <template v-else>
                        <valve-detail :data="item"></valve-detail>
                    </template>
                </u-collapse-item>
            </u-collapse>
        </view>
    </view>
</template>

<script>
import MeterDetail from './components/meter-detail.vue'
import ValveDetail from './components/valve-detail.vue'

export default {
    components: {
        MeterDetail,
        ValveDetail
    },
    data() {
        return {
            deviceTypes: ['热表', '阀门'],
            currentType: 0,
            deviceList: [
                {
                    address: '铁西新区大潘街道中德园D63项目G5楼 1-8-1',
                    // 热表数据
                    currentReading: '1836.20',
                    totalUsage: '1225.00',
                    power: '251.00',
                    fee: '235.00',
                    // 阀门数据
                    workMode: '温度平衡模式',
                    indoorTemp: '22',
                    setTemp: '23',
                    valveStatus: '正常'
                },
                {
                    address: '铁西新区大潘街道中德园D63项目G5楼 1-8-2',
                    currentReading: '1456.80',
                    totalUsage: '986.00',
                    power: '198.00',
                    fee: '186.00',
                    workMode: '温度平衡模式',
                    indoorTemp: '22',
                    setTemp: '23',
                    valveStatus: '正常'
                },
                {
                    address: '铁西新区大潘街道中德园D63项目G5楼 1-8-3',
                    currentReading: '2156.40',
                    totalUsage: '1568.00',
                    power: '286.00',
                    fee: '312.00',
                    workMode: '温度平衡模式',
                    indoorTemp: '22',
                    setTemp: '23',
                    valveStatus: '正常'
                }
            ]
        }
    },
    methods: {
        // 切换设备类型
        handleTypeChange(index) {
            this.currentType = index
        },

        // 展开/收起面板
        handleChange(index) {
            console.log('当前展开的面板:', index)
        }
    }
}
</script>

<style lang="scss" scoped>
.page-container {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding: 20rpx 0rpx;

    .top-segment {
        padding: 20rpx;
    }
    .device-list {
        margin-top: 20rpx;
    }
}
</style>